@import "@tryghost/shade/styles.css";

.admin-x-base.shade {
  animation-name: none;
}

@keyframes bump {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slideUp {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  51% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideDown {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  51% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-slide-up {
  animation: slideUp 0.3s ease-in-out;
  display: inline-block;
  will-change: transform, opacity;
}

.animate-slide-down {
  animation: slideDown 0.3s ease-in-out;
  display: inline-block;
  will-change: transform, opacity;
}

button.ap-action-button:active svg {
  animation: bump 0.3s ease-in-out;
}

.ap-red-heart path {
  fill: #fb2d8d;
}

/* Note and profile content */

.ap-note-content a,
.ap-profile-content a,
.ap-note-content-large a {
  color: #00a4eb !important;
}

.ap-note-content a:hover,
.ap-profile-content a:hover,
.ap-note-content-large a:hover {
  text-decoration: underline !important;
}

.ap-note-content span.invisible,
.ap-profile-content span.invisible,
.ap-note-content-large span.invisible {
  display: none;
}

.ap-note-content a:not(.hashtag) span.ellipsis:after,
.ap-profile-content a:not(.hashtag) span.ellipsis:after,
.ap-note-content-large a:not(.hashtag) span.ellipsis:after,
.ap-likes .ellipsis::after {
  content: "…";
}

.ap-note-content > * + * {
  margin-top: 1.2rem !important;
}

.ap-note-content-large > * + * {
  margin-top: 1.65rem !important;
}

.ap-note-content > h1 + *,
.ap-note-content > h2 + *,
.ap-note-content > h3 + * {
  margin-top: 0.6rem !important;
}

.ap-note-content-large > h1 + *,
.ap-note-content-large > h2 + *,
.ap-note-content-large > h3 + * {
  margin-top: 0.8rem !important;
}

.ap-note-content figure,
.ap-note-content-large figure {
  display: none;
}

.ap-note-content ul,
.ap-note-content-large ul {
  list-style-type: "-" !important;
  padding-left: 1rem !important;
}

.ap-note-content ol,
.ap-note-content-large ol {
  list-style: auto !important;
  padding-left: 1.7rem !important;
}

.ap-note-content li {
  font-size: 1.4rem !important;
  padding-left: 0.4rem !important;
}

.ap-note-content-large li {
  font-size: 1.6rem !important;
  padding-left: 0.4rem !important;
}

.ap-note-content h2,
.ap-note-content h3,
.ap-note-content h4,
.ap-note-content h5 {
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  line-height: 1.375 !important;
}

.ap-note-content-large h2,
.ap-note-content-large h3,
.ap-note-content-large h4,
.ap-note-content-large h5 {
  font-size: 1.6rem !important;
}

.ap-note-content blockquote,
.ap-note-content-large blockquote {
  border-left: 2px solid #e5e9ed;
  padding-left: 0.8rem;
  margin: 0.6rem 0 !important;
}

.ap-note-content blockquote p {
  font-weight: 400;
  font-size: 1.4rem;
}

.ap-note-content-large blockquote p {
  font-weight: 400;
  font-size: 1.6rem;
}

.ap-note-content code,
.ap-note-content-large code {
  background-color: #f9fafb !important;
  font-size: 1.3rem !important;
  color: #15171a;
}

.ap-note-content-large code {
  font-size: 1.5rem !important;
}

.ap-note-content mark,
.ap-note-content-large mark {
  background-color: transparent !important;
  color: #15171a;
}

.ap-likes .invisible {
  display: inline-block;
  font-size: 0;
  height: 0;
  line-height: 0;
  position: absolute;
  width: 0;
}

.ap-textarea {
  field-sizing: content;
}
